<!--
 * @Author: dawei 664690250@qq.com
 * @Date: 2023-04-07 07:58:53
 * @LastEditors: dawei 664690250@qq.com
 * @LastEditTime: 2023-04-07 08:42:32
 * @FilePath: /hn-talent-ump-vue/src/components/gantt/modules/Chart/DaysHighlight.vue
 * @Description: 请填写文件描述
 * 大佬别走，带带弟弟
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!--
/**
 * @fileoverview Days highlight component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->

<template>
  <g
    class="gantt-elastic__chart-days-highlight-container"
    :style="{ ...root.style['chart-days-highlight-container'] }"
    v-if="showWorkingDays"
  >
    <rect
      class="gantt-elastic__chart-days-highlight-rect"
      v-for="day in workingDays"
      :key="getKey(day)"
      :x="day.offset.px"
      y="0"
      :width="day.width.px"
      height="100%"
      :style="{ ...root.style['chart-days-highlight-rect'] }"
    ></rect>
  </g>
</template>

<script>
import moment from 'moment'
export default {
  name: 'DaysHighlight',
  inject: ['root'],
  data() {
    return {}
  },
  methods: {
    /**
     * Get key
     *
     * @param {object} day
     * @returns {string} key ideintifier for loop
     */
    getKey(day) {
      return moment(day.time).format('YYYY-MM-DD')
    }
  },
  computed: {
    /**
     * Get working days
     *
     * @returns {array}
     */
    workingDays() {
      return this.root.state.options.times.steps.filter(step => {
        return this.root.state.options.calendar.workingDays.indexOf(moment(step.time).day()) === -1
      })
    },

    /**
     * Show working days?
     *
     * @returns {bool}
     */
    showWorkingDays() {
      const calendar = this.root.state.options.calendar
      if (
        typeof calendar.workingDays !== 'undefined' &&
        Array.isArray(calendar.workingDays) &&
        calendar.workingDays.length
      ) {
        return true
      }
      return false
    }
  }
}
</script>
